<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
</head>

<body>

    <!-- 主题右侧部分内容
                col-md-4：占网格的4格
                mb-5：下外边距5rem
            -->
    <div>

        <!-- 卡片一 -->
        <div class="card mt-3">
            <div class="card-body d-flex">
                <img src="../../assets/images/CSDN.png" class="card-img-top img-fluid" style="width: 120px;" alt="...">
                <div class="ms-5">
                    <p class="card-text">&bull; 技术干货分享</p>
                    <p class="card-text">&bull; 免费资料领取</p>
                    <p class="card-text fw-bolder">&bull; 扫码领取更多惊喜</>
                </div>
            </div>
        </div>

        <!-- 卡片二 -->
        <div class="card mt-3">
            <div class="card-body">
                <h5>社交</h5>
                <hr/>
                <p class="card-text">QQ: 876767656</p>
                <p class="card-text">邮箱: bilibili@qq.com</p>
            </div>
        </div>

        <!-- 动态图 -->
        <img class="mt-3 img-fluid" src="../../assets/images/g1.gif" alt="" style="height: 130px; width: 100%;">

        <!-- 卡片三 -->
        <div class="card mt-3">
            <div class="card-body">
                <h5>分类</h5>
                <hr />
                <p><a href="#" class="card-link text-decoration-none">基础部分 (2)</a></p>
                <p><a href="#" class="card-link text-decoration-none">数据库基础 (2)</a></p>
                <p><a href="#" class="card-link text-decoration-none">IO流 (2)</a></p>
            </div>
        </div>

        <!-- 卡片四 -->
        <div class="card mt-3">
            <div class="card-body">
                <h5>归档</h5>
                <hr />
                <p><a href="#" class="card-link text-decoration-none">2023年6月 (2)</a></p>
                <p><a href="#" class="card-link text-decoration-none">2023年8月 (2)</a></p>
            </div>
        </div>

        <!-- 卡片五 -->
        <div class="card mt-3">
            <div class="card-body">
                <h5>友情链接</h5>
                <hr />
                <p><a href="#" class="card-link text-decoration-none">RBAC权限校验实战</a></p>
                <p><a href="#" class="card-link text-decoration-none">简单易懂的单例模式</a></p>
            </div>
        </div>
    </div>

</body>

</html>